<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
  <button>GET</button>
  <button>POST</button>
  <button>AJAX</button>
  <script>
    axios.defaults.baseURL = 'http://127.0.0.1:8000'
    const btns = document.querySelectorAll('button')
    btns[0].onclick = function() {
      axios.get('/server', {
        params: {
          a: 100,
          b: 200
        }
      }).then(value =>
        console.log(value)
      )
    }

    btns[1].onclick = function() {
      // url、请求体、其他
      axios.post('/server',{c:300,d:400}, {
        params: {
          a: 100,
          b: 200
        },
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
      }).then(value =>
        console.log(value)
      )
    }

    btns[2].onclick = function() {
      axios({
        url: '/server',
        method: 'post',
        params: {
          a: 100,
          b: 200
        },
        data: {
          c: 300,
          d: 400
        },
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(value => console.log(value))
    }
  </script>
</body>
</html>